<template>
    <!-- 意图识别 -->
    <div class="intent-info-box flex w-full justify-center h-full" v-loading="loading">
        <div class="flex flex-col flex my-4 w-full items-center">
            <div class="my-2 font-bold w-2/5 head-title">意图列表</div>
            <el-table :data="tableData" border style="width: 40%;"
                class="mb-7">
                <el-table-column prop="name" label="标题" width="150" header-align="center">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <!-- <el-icon v-show="checkKey===scope.row.name">
                                <timer />
                            </el-icon> -->
                            <div style="width: 16px;">
                                <i class="iconfont icon-sanjiao text-xs align-baseline" style="color: #409eff;"
                                    v-show="checkKey === scope.row.name"></i>
                            </div>
                            <span>{{ scope.row.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" width="" header-align="center" />
            </el-table>
            <div class="textera-save-style w-2/5">
                <el-input type="textarea" 
                    v-model="textareaVal" 
                    :rows="6" 
                    placeholder="请输入需要进行意图识别的文本" 
                    class="text-input no-border" 
                    @focus="handleFocus" 
                    @blur="handleBlur"
                    ref="textrea"
                />
                <!-- <textarea v-model="textareaVal"                     @focus="handleFocus" 
                @blur="handleBlur" 
                class="text-input" rows="6" placeholder="请输入需要进行意图识别的文本"></textarea> -->
                <!-- <el-button icon="el-icon-close" class="clear-button" @click="clearInput" circle /> -->
                <el-icon 
                class="clear-button"
                @click="clearInput" 
                @mouseover="overColor"
                @mouseout="outColor">
                    <Close />
                </el-icon>
                <div class="button-container">
                    <el-button type="primary" @click="saveInput" class="save-btn">开始识别</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped></style>
<script lang="ts" setup>
import { ref , watch } from 'vue'
const hasToken = <string>localStorage.getItem('accessToken');

import IntentTell from "../../api/currentdemo/IntentTell"
const loading = ref(false);
const router = useRouter()

const textareaVal = ref('');

const checkKey = ref('');
const textrea =ref()
//表格数据
const tableData = [
    {
        name: '查水费',
        description: '查水费、查用水量、查欠费',
    },
    {
        name: '查停水',
        description: '查与停水相关的信息',
    },
    {
        name: '报修',
        description: '家庭用水发生问题，需要人员上门维修',
    },
    {
        name: '投诉',
        description: '投诉',
    },
    {
        name: '查用水知识',
        description: '咨询与家庭用水相关的知识',
    },
    {
        name: '查水价',
        description: '查询水费价格的计算公式',
    },
];
//小叉叉清空事件
const clearInput = () => {
    textareaVal.value = '';
    checkKey.value = '1';
    clearTableColor()
}
// 清除所有行的背景色和字体颜色方法
const clearTableColor = () => {
    const trs = document.querySelectorAll('.el-table__row') as NodeListOf<HTMLElement>
    trs.forEach(tr => {
        tr.style.background = '';
        tr.style.color = '';
    });
}
// 初始加载清空界面缓存
watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    clearTableColor()
    checkKey.value = '1';
    textareaVal.value = '';
    if(textrea.value){
        textrea.value.focus();
    }
  },
  { immediate: true }
)
//点击开始识别事件
const saveInput = () => {
    // 验证 textareaVal.value 是否为空
    if (!textareaVal.value.trim()) {
        ElMessage.error('请填写识别文本');
        return;
    }

    // 组合后端所需数据
    const obj = {
        intents: JSON.stringify(tableData),
        // intents: tableData,
        content: textareaVal.value
    };
    loading.value = true; // 开始加载
    IntentTell.IntentTellSave(hasToken, obj).then(res => {
        // console.log('res=', res);
        checkKey.value = res.data;
        // textareaVal.value = '';
        // 先清除所有行的背景色和字体颜色
        clearTableColor()
        if(res.data ==''){
            ElMessage.error('匹配不到对应的意图');
        }else{
            tableData.forEach((val, index) => {
            if (val.name === res.data) {
                const tr = document.querySelectorAll('.el-table__row')[index] as HTMLElement;
                tr.style.background = '#ecf5ff'
                tr.style.color = '#409eff'
            }
        });
            ElMessage.success('识别成功');
        }

    }).finally(() => {
        loading.value = false; // 加载结束
    }).catch(error => {
        // console.log('error',error);
        clearTableColor()
        checkKey.value = '1';
        ElMessage.error('匹配不到对应的意图');
    });
};

const handleFocus = (event) => {
    document.querySelector('.textera-save-style').classList.add('change-color');
};

const handleBlur = (event) => {
    document.querySelector('.textera-save-style').classList.remove('change-color');
};
const overColor =()=>{
    document.querySelector('.clear-button').classList.add('a');
}
const outColor =()=>{
    document.querySelector('.clear-button').classList.remove('a');
}
onMounted(()=>{
    textrea.value.focus();
})
</script>
<style scoped>
/* 去掉table的hover事件 */
:deep(.el-table tbody tr:hover>td) {
    background-color: transparent !important;
}
:deep(.el-textarea__inner) {
    border: none;
    box-shadow: none;
    resize: none;
}
.head-title{
    color: var(--v-session-hist);
}
.intent-info-box /deep/ .is-leaf {
    background-color: var(--v-table-bg-color);
    color: var(--v-table-color);
    font-weight: bold;
}
.textera-save-style.change-color{
    border-color: #409eff;
}
.textera-save-style{
    border-radius: 5px;
}
.clear-button.a{
    color: #409eff;
}
</style>
